<template>
  <div>
    <h1>Page 1</h1>
  </div>
  <el-input v-model="content" />
  <el-table 
    :data="tableData" 
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column
      prop="name"
      label="姓名"
      width="180" 
    />
    <el-table-column 
      prop="desc" 
      label="描述" 
      width="180" 
    />
  </el-table>
  <p>{{ content }}</p>
  <p>{{ name }}</p>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import utils from '$common/utils'
import './a.css'
import $curl from '$common/curl'

const tableData = ref([
  {
    name: 'tony',
    desc: 'desc1',
  },
  {
    name: 'james',
    desc: 'desc2',
  },
])
let name = 'tony'
const content = ref('')
console.log('page1 init');

onMounted(async() => {
  const res = await $curl({
    url: '/api/project/list',
    method: 'GET',
    query: {
    },
  })
  if (res.success) {
    tableData.value = [...tableData.value, ...res.data]
  }
})
</script> 

<style scoped lang="less">
h1 {
  color: red;
}
</style>
